<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="d3-tip.css">
    
</head>
<body>
    <text dominant-baseline=""></text>
    <script src="d3.min.js"></script>
    <!-- <script src="https://d3js.org/d3.v7.min.js"></script> -->
    <script src="d3-tip.js"></script>
    <script src="topojson.min.js"></script>
    <script>

        

        const width = 800 ;
        const height = 600 ;
        const margin = 50 ;

        const svg = d3.select('body').append('svg');
        svg.attr('width',width);
        svg.attr('height',height);
        svg.style('border','2px solid #ccc');
        
        var tip = d3.tip()
        .attr('class', 'd3-tip')
        .html(function(e,d) { return d.properties.name ; })
        tip.direction('e')
        tip.offset([0, -0])
        svg.call(tip);
        (async ()=>{
           // const data = await d3.json('china-geo.json');
            let data = await d3.json('countries.json');
            data = topojson.feature(data,data.objects.countries);
            console.log(data);

        

            //const projections = d3.geoMercator()
            const projections = d3.geoAzimuthalEquidistant()
               //.fitExtent([[0,0],[600,600]],data)
               .fitSize([width,height],data)
               .fitExtent([[50,50],[width-50,height-50]],data)
        
            //projections.scale(1200)
            //projections.translate([width/2,height/2])
            
            const path = d3.geoPath()//.projection(projection)
           
            //projections.center(centroid);
            
            path.projection(projections)
            const centroid = path.centroid(data.features[5]);
            console.log(centroid);

            svg.append('g')
                .selectAll('path')
                .data(data.features)
                .join('path')
                .attr('d',path)
                .attr('fill',(d,i)=>d3.schemeSet3[i%d3.schemeSet3.length])
                .attr('stroke','#666')
                .on('mouseover',function(e,d){
                    d3.select(e.target)
                      .attr('stroke-width',2)
                      .attr('stroke','#ccc')
                      .attr('opacity',0.5)
                    tip.show(e,d)  
                })
                .on('mouseout',function(e,d){
                    d3.select(e.target)
                        .attr('stroke-width',1)
                        .attr('stroke','#666')
                        .attr('opacity',1)
                    tip.hide(e,d)    
                })

            svg.append('g')
                .selectAll('text')
                .data(data.features)
                .join('text')
                .attr('x',d=>path.centroid(d)[0])
                .attr('y',d=>path.centroid(d)[1])
                .text(d=>d.properties.name)
                .attr('font-size',8)
                .attr('text-anchor','middle')    

        })();
         
    </script>
    <text text-anchor="middle" dominant-baseline="" transform="rotate" ></text>
</body>
</html>